import { useState } from 'react';
import { UploadOutlined, DeleteOutlined } from '@ant-design/icons';
import { ProFormUploadDragger } from '@ant-design/pro-form';
import { ProFormDraggerProps } from '@ant-design/pro-form/lib/components/UploadDragger';
import styles from './index.scss';
export interface AvatarUploadProps {
    deleteVisible: boolean;
    onDelete: () => void;
    uploadProps?: ProFormDraggerProps;
    background?: string;
}

export default function AvatarUpload(props: AvatarUploadProps) {
    return (
        <label
            className={styles.root}
            style={{ backgroundImage: `url(${props.background})` }}
        >
            <div className={styles.mask}>
                <div className={styles.controllerWrap}>
                    <UploadOutlined style={{ fontSize: '20px' }} />
                    {props.deleteVisible ? (
                        <DeleteOutlined
                            onClick={(e) => {
                                e.stopPropagation();
                                e.preventDefault();
                                props?.onDelete();
                            }}
                            style={{
                                fontSize: '20px',
                                marginLeft: 10,
                            }}
                        />
                    ) : undefined}
                </div>
            </div>

            <span style={{ display: 'none' }}>
                <ProFormUploadDragger
                    {...props.uploadProps}
                    fieldProps={{
                        multiple: false,
                        maxCount: 1,
                        ...props.uploadProps?.fieldProps,
                    }}
                />
            </span>
        </label>
    );
}
